<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*
        当一个块级元素出现在另一个块级元素的上方时,上方元素的下外边距与下方元素的上外边距会发生合并
        合并后取外边距较大者作为外边距的值
     */
    .c1 {
      width: 200px;
      height: 100px;
      background: red;
      margin-bottom: 50px;
    }

    .c2 {
      width: 200px;
      height: 100px;
      background: green;
      margin-top: 100px;
    }

    /*
        当一个元素包含另一个元素,两个元素的上外边距会发生合并
        以外层元素的外边距作为合并后的外边距
        但是,当设置了标签体内容、边框、内边距时,外边距合并会失效
     */
    .container {
      width: 1000px;
      height: 500px;
      background: #dddddd;
      /*margin-top: 100px;*/
      /*border: 1px solid purple;*/
      padding: 10px;
    }

    .c3 {
      width: 200px;
      height: 100px;
      background: red;
      margin-top: 100px;
    }
  </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<hr>
<div class="container">
  <div class="c3"></div>
</div>
</body>
</html>